<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>住房管理</title>
    <!-- 离线 Google 字体: Source Sans Pro -->
    <link rel="stylesheet" th:href="@{/AdminLTE/css/google.css?family=Source+Sans+Pro:300,400,400i,700&display=fallback}">
    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{/plugins/fontawesome-free/css/all.min.css}">
    <!-- bootstarp table -->
    <link rel="stylesheet" th:href="@{/plugins/bootstrap-table/bootstrap-table.min.css}">
    <!-- sweetalert2 -->
    <link rel="stylesheet" th:href="@{/plugins/sweetalert2/sweetalert2.css}">
    <!-- 主题样式 -->
    <link rel="stylesheet" th:href="@{/AdminLTE/css/adminlte.min.css}">
    <!-- sweetalert2 -->
    <link rel="stylesheet" th:href="@{/plugins/sweetalert2/sweetalert2.css}">

    <link th:href="@{/service/css/viewer.min.css}" rel="stylesheet">

    <style>
        #myTable img{
            cursor: pointer;
        }
    </style>
</head>
<body>
住房管理
<button class="btn btn-primary btn-add" data-toggle="modal" data-target="#modal-add-room" data-title="添加房间">添加房间</button>
<table id="myTable"></table>


<!-- 添加房间 视图 -->
<div class="modal fade" id="modal-add-room" data-backdrop="static" style="display: none;" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">添加房间</h4>
                <button type="button close-btn" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 竖排表单 -->
                <!--                        <div class="card-header">-->
                <!--                            <h3 class="card-title">竖排表单</h3>-->
                <!--                        </div>-->
                <!-- /.card-header -->
                <!-- form start -->
                <form class="form-horizontal" name="addRoomForm" id="addRoomForm">
                    <div class="card-body">
                        <div class="input-group row row-id">
                            <label for="num" class="col-sm-2 col-form-label">房间号</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" required id="num" name="num" placeholder="房间号">
                            </div>
                        </div>
                        <div class="input-group row">
                            <label for="roomType" class="col-sm-2 col-form-label">房间类型</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="roomType" name="roomType" placeholder="房间类型">
                            </div>
                        </div>
                        <div class="input-group row">
                            <label for="desc" class="col-sm-2 col-form-label">简介</label>
                            <div class="col-sm-10">
                                <textarea id="desc" name="desc" rows="8" cols="30"></textarea>
                            </div>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary btn-submit-add-room">提交</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<!-- jQuery -->
<script th:src="@{/plugins/jquery/jquery.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
<!-- Bootstrap table 4 -->
<script th:src="@{/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js}"></script>
<!-- sweetalert2 -->
<script th:src="@{/plugins/sweetalert2/sweetalert2.all.js}"></script>
<!-- viewer 图片放大 -->
<script th:src="@{/service/js/viewer.min.js}"></script>
<!-- sweetalert2 -->
<script th:src="@{/plugins/sweetalert2/sweetalert2.all.js}"></script>
<!-- 特定页面脚本 -->
<script>
$(()=>{
    // 初始化表格
    let t = $("#myTable").bootstrapTable({
        columns: [
            {
                checkbox: true,
            },
            {
                title: "序号",
                field: "id",
                formatter: function(value, row, index){
                    return index + 1;
                }
            },
            {
                title: "房间号",
                field: "num",
                sortable: true,
                searchable: true
            },
            {
                title: "房间类型",
                field: "name",
                width: '150px'

            },
            {
                title: "价格",
                field: "price",
            },
            {
                title: "状态",
                field: "state",
                formatter: function(value){
                    if (value == 1){
                        return '<button type="button" class="btn btn-outline-success btn-sm">未入住</button';
                    } else if (value == 2){
                        return '<button type="button" class="btn btn-outline-danger btn-sm">已入住</button>'
                    } else{
                        return '<button type="button" class="btn btn-outline-warning btn-sm">未打扫</button>';
                    }
                }
            },
            {
                title: "图片",
                field: "img",
                width: '150',
                formatter: (value) => {
                    if (value == null){
                        return '<img src="/AdminLTE/img/photo2.png" class="imgs" width="150px"/>';
                    }
                    return '<img src="' + value + '"/>';
                }
            },
            {
                title: "简介",
                field: 'desc'
            },
            {
                title: "操作",
                field: "id",
                formatter: (value, row) => {
                    return `<button class='btn btn-primary'  data-title="修改【${row.name}】用户信息"  data-toggle="modal" data-target="#modal-default" onclick='edit(${JSON.stringify(row)})'>编辑</button>
                                <button class='btn btn-danger'>删除</button>`;
                }
            },
        ],
        url: '/room/list',
        queryParams: function(search){
            return {
                pageNumber: this.pageNumber,
                pageSize: this.pageSize
            }
        },
        // search: true,
        sortable: true,
        locale: 'zh-CN',
        // 分页
        pagination: true,
        sidePagination: 'server', // 设置服务端分页
        pageNumber: 1,
        pageSize: 2,
        pageList: [1, 2, 5, 10],
        responseHandler: function (res){
            console.log("responseHandler")
            if (res.code == 200){
                return {
                    total: res.data.total,
                    rows: res.data.list
                };
            }
            console.error("未获取到 room 数据");
            return {
                total: 0,
                rows: []
            }
        },
        onLoadSuccess: function (){
            console.log("onLoadSuccess")
            /*查看大图*/
            var image = new Viewer(document.getElementById('myTable'), {
                button: true,
                navbar: false,
                width: 660,
                title: false
            });
        }
    });
    // 添加房间
    $(".btn-submit-add-room").click(function(){
        $.ajax({
            async: false,
            url: "/room",
            type: "post",
            data: $("#addRoomForm").serialize(),
            success: function (res){
                if (res.code == 200){
                    Swal.fire({
                        title: '新增成功',
                        text: '添加房间成功',
                        confirmButtonColor: 'green',
                        confirmButtonText: '确认'
                    })
                } else{
                    Swal.fire({
                        title: '新增失败',
                        text: res.message,
                        confirmButtonColor: 'red',
                        confirmButtonText: '确认'
                    })
                }
                $('#modal-add-room').modal('hide');
                // 刷新表格
                $('#myTable').bootstrapTable('refresh');
            }
        })
        console.log("end")
    });
})
</script>
</body>
</html>